<template>
	<a-modal
		:footer="null"
		:visible="visible"
		:title="title"
		 
		@cancel="handleCancel"
	>
		<a-form
			ref="formRef"
			name="custom-validation"
			:model="formState"
			:rules="rules"
			v-bind="layout"
			@finish="handleFinish"
			@validate="handleValidate"
			@finishFailed="handleFinishFailed"
		>
			<a-form-item has-feedback label="角色名称" name="name">
				 
				<a-input
					v-model:value="formState.name"
					allowClear
					placeholder="请输入角色名称"
					autocomplete="off"
				/>
			</a-form-item>
        
			<a-form-item has-feedback label="状态" name="status">
				<a-select v-model:value="formState.status" placeholder="请选择状态">
			  <a-select-option value="1" >启用</a-select-option>
                <a-select-option value="0">禁用</a-select-option>
				</a-select>  
			</a-form-item>
			<a-form-item :wrapper-col="{ span: 14, offset: 4 }">
				<a-button type="primary" html-type="submit">保存</a-button>
				<a-button style="margin-left: 10px" @click="resetForm">重置</a-button>
			</a-form-item>
		</a-form>
	</a-modal>
</template>
<script>
import { defineComponent, reactive, ref, onMounted, nextTick ,computed} from 'vue'
import { useStore ,mapGetters} from 'vuex'
export default defineComponent({
	props: {
		model: {
			type: Object,
			default: function () {
				return {}
			}
		},
		title: {
			type: String,
			default: ''
		},
		visible: {
			type: Boolean,
			default: function () {
				return false
			}
		},
		cid: null
	},
	emits: {
		'close-modal': null,
		"ok":null
	},
	setup(props, context) {
		const formRef = ref()
		 const store = useStore()
		const formState = reactive({
			password: '',
			checkPass: '',
			status:"1"
			
		})
		let checkAge = async (_rule, value) => {
			if (!value) {
				return Promise.reject('Please input the age')
			}

			if (!Number.isInteger(value)) {
				return Promise.reject('Please input digits')
			} else {
				if (value < 18) {
					return Promise.reject('Age must be greater than 18')
				} else {
					return Promise.resolve()
				}
			}
		}

		let validatePass = async (_rule, value) => {
			 
			if (value==''||value==undefined) {
				return Promise.reject('请输入密码')
			} else {
				if (formState.checkPass !== '') {
					formRef.value.validateFields('checkPass')
				}

				return Promise.resolve()
			}
		}

		let validatePass2 = async (_rule, value) => {
			if (value === '') {
				return Promise.reject('请再次输入密码')
			} else if (value !== formState.password) {
				return Promise.reject("密码不一致")
			} else {
				return Promise.resolve()
			}
		}

		const rules = {
			name: [
				{
					required: true,
					message: '请输入用户账号',
					trigger: 'change'
				}
			],
            role_id:[{
                required: true,
				message: '请选择角色',
				trigger: 'change'
            }],
			password: [
				{
					required: false,
					message: '请输入密码',
					trigger: 'change'
				}
			],
			checkPass: [
				{   
					validator: validatePass2,
					trigger: 'change'
				}
			],
			age: [
				{
					validator: checkAge,
					trigger: 'change'
				}
			]
		}
		const layout = {
			labelCol: {
				span: 4
			},
			wrapperCol: {
				span: 14
			}
		}

		const handleFinish = (values) => {
			console.log(values, formState)
			context.emit("ok",{
				values,
				model:props.model
			})
		}

		const handleFinishFailed = (errors) => {
			console.log(errors)
		}

		const resetForm = () => {
			formRef.value.resetFields()
		}

		const handleValidate = (...args) => {
			console.log(args)
		}
		const handleCancel = () => {
			context.emit('close-modal', false)
		}
		const handleOk=()=>{

		}
		onMounted(() => {
			const {edit,name,status} = props.model
			if(edit){
				 
				formState.status=status+'';
			    formState.name=name;
				 
			}
		})
		return {
			formState,
			formRef,
			rules,
			layout,
			handleFinishFailed,
			handleFinish,
			resetForm,
			handleValidate,
			handleCancel,
			handleOk
		}
	}
})
</script>